<template>
  <div>
    <h1>app</h1>
    <h1 v-if="show">{{ msg }}</h1>
    <button @click="show = !show">show=!show</button>
    <child-a v-if="flag"></child-a>
    <button @click="flag = !flag">flag</button>
    <hr />
    <next-tick></next-tick>
    <child-b></child-b>
  </div>
</template>

<script>
import ChildA from "./components/ChildA.vue";
import ChildB from "./components/ChildB.vue";
import NextTick from "./components/NextTick.vue";
export default {
  data() {
    return {
      show: true,
      msg: "浩杰精神一下",
      flag: true,
    };
  },
  components: {
    ChildA,
    NextTick,
    ChildB,
  },
  beforeCreate() {
    console.log("app beforeCreate");
  },

  created() {
    console.log("app created");
  },
  beforeMount() {
    console.log("app beforeMount");
  },
  mounted() {
    console.log("app mounted");
  },
  beforeUpdate() {
    console.log("app beforeUpdate");
  },
  updated() {
    console.log("app updated");
  },
  beforeDestroy() {
    console.log("app beforeDestroy");
  },
  destroyed() {
    console.log("aap destroyed");
  },
  /* 
  父子组件生命周期钩子函数的加载顺序：
  父组件的beforeCreate 父组件的created  父组件的beforeMount  子组件beforeCreate 子组件的created 子组件beforeMount  子组件mounted 父组件的mounted
  */
};
</script>

<style lan
ChildAg="scss" scoped>
</style>